<template>
  <el-card class="wisplm-user-list-card">
    <el-row slot="header">
      <el-col :span="20" style="font-size: 30px; text-align: left">Recent Patient</el-col>
      <el-col :span="4">
        <el-button style="padding: 0;" type="text" @showMore="showMoreUser">view more>></el-button>
      </el-col>
    </el-row>
    <el-row v-for="(user, index) of userList" :key="index" class="wisplm-user-list-item">
      <el-col :span="4">
        <el-avatar :src="user['avatar']"/>
      </el-col>
      <el-col :span="10">
        <el-row>
          <el-col><span style="text-align: left; font-size: 16px">{{ user['username'] }}</span></el-col>
          <el-col><span style="color: #7e7e7e; font-size: 14px">24 Year</span></el-col>
        </el-row>
      </el-col>
      <el-col :span="10" class="wisplm-user-list-item_state" v-html="user['state']"></el-col>
    </el-row>
  </el-card>
</template>

<script>
export default {
  name: "index",
  props: ['userList'],
  data() {
    return {
      // userList: [
      //   {
      //     avatar: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      //     username: 'Aziz Bakree',
      //     state: '<span style="color: orange">Pending</span>'
      //   },
      //   {
      //     avatar: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      //     username: 'Griezerman',
      //     state: '<span style="color: blue">On Recovery</span>'
      //   },
      //   {

      //     avatar: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      //     username: 'Oconner',
      //     state: '<span style="color: red">Rejected</span>'
      //   },
      //   {
      //     avatar: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      //     username: 'Uli Trumb',
      //     state: '<span style="color: green">Recovered</span>'
      //   }
      // ],
    }
  },
  methods: {
    showMoreUser() {
      this.$emit('show-more-user');
    }
  }
}
</script>

<style scoped>
.wisplm-user-list-card {
  /*width: 30%;*/
  height: 350px;
  text-align: left;
  overflow-wrap: break-word;
}

.wisplm-user-list-card >>> .el-card__body {
  height: 240px;
  overflow-y: auto;
}

.wisplm-user-list-card >>> .el-card__body::-webkit-scrollbar {
  width: 5px;
}

.wisplm-user-list-item {
  border-bottom: 1px solid #eaeaea;
  padding-bottom: 15px;
  margin-bottom: 15px;
}

.wisplm-user-list-item_state {
  font-size: 14px;
  text-align: right;
}
</style>
